import { getScene, contentScene } from './scene'// Three.js三维场景
import { renderer, camera, contentCamera } from './RendererCamera'// 渲染器对象和相机对象
import { created2DRenderer } from './tag'// 导入顶部标签
export default function () {
  // 创建场景内容
  getScene()
  // 解构场景对象
  const { scene } = contentScene
  // 解构顶部标签
  const { labelRenderer } = created2DRenderer()
  /**
   * 进行进行持续渲染
   */
  const render = () => {
    labelRenderer.render(scene, camera)// HTML标签相关代码(2D)
    renderer.render(scene, camera) // 执行渲染操作
    requestAnimationFrame(render) // 请求再次执行渲染函数render，渲染下一帧
  }
  // 监听页面尺寸是否修改
  window.onresize = () => {
    contentCamera.width = window.innerWidth
    contentCamera.height = window.innerHeight
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(contentCamera.width, contentCamera.height)
    // 重置2D渲染器输入画布cancas尺寸
    labelRenderer.setSize(contentCamera.width, contentCamera.height)
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = contentCamera.width / contentCamera.height
    // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
    // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix()
  }
  return { render, renderer, labelRenderer }
}
